<template>
  <main class="role-main">
    <div class="role-div">
      <p><span>添加用户</span><span @click="closeAddRole">X</span></p>
      <div class="ipt-div">
        <span>角色名称：</span>
        <el-input v-model="input1" />
      </div>
      <div class="ipt-div">
        <span>角色描述：</span>
        <el-input v-model="input2" />
      </div>
      <section>
        <el-button @click="closeAddRole">取消</el-button>
        <el-button type="primary" @click="rolePersons">确定</el-button>
      </section>
    </div>
  </main>
</template>

<script setup>
import axios from "axios";
import VueCookies from "vue-cookies";
import { reactive, ref, onMounted } from "vue";
// 接收参数
const emit = defineEmits(["eee"]);
// 关闭遮罩层
function closeAddRole() {
  emit("eee", false);
}
// 角色名称
let input1 = ref();
// 角色描述
let input2 = ref();
// 确定
function rolePersons() {
  if (input1.value !== undefined) {
    const headers = {
      Authorization: VueCookies.get("token"),
    };
    axios
      .post(
        "/api/roles",
        {
          roleName: input1.value,
          roleDesc: input2.value,
        },
        { headers }
      )
      .then((res) => {
        alert(res.data.meta.msg)
        // 关闭遮罩层
        closeAddRole()
      });
  } else {
    alert("角色名称不能为空!");
  }
}
</script>

<style scoped>
.role-main {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.role-div {
  width: 700px;
  height: 300px;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}
p {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin: 0px 0px 40px;
}
section {
  display: flex;
  position: absolute;
  bottom: 70px;
  right: 80px;
}
.ipt-div {
  display: flex;
  align-items: center;
  margin: 10px 0px;
}
.ipt-div span {
  width: 100px;
}
</style>